<template>
	<view class="bgMinor2 pt-24 plr-24 pt-40" :style="{ minHeight: `${windowHeight}px`, height: 'auto' }">
		<view class="">
			<view class="bgWhite plr-27 ptb-40 radius-16">
				<view class="tc lineHeight1">
					<view class="size-48 color-blue1 weight-6">1</view>
					<view class="size-34 mt-24">上传正面照片</view>
				</view>
				<view class="size-24 tc mt-16 lineHeight1 color-black3">1张五官清晰的正面面部照片</view>
				<view class="center flex-column mt-40">
					<!-- :customStyle="{ borderRadius: '16rpx' }" -->
					<uv-upload :fileList="dataInfo.fileList1" name="1" multiple :maxCount="1" @afterRead="afterRead" @delete="deletePic" width="400rpx" height="400rpx"></uv-upload>
				</view>
				<view class="size-34 color-black3 tc mt-40">等待识别…</view>
			</view>

			<view class="bgWhite plr-27 ptb-40 radius-16 mt-24">
				<view class="tc lineHeight1">
					<view class="size-48 color-blue1 weight-6">2</view>
					<view class="size-34 mt-24">补充12-30张照片</view>
				</view>
				<view class="size-24 tc mt-16 lineHeight1 color-black3">半身、全身都有效果最佳</view>
				<view class="center mt-40">
					<uv-upload
						:fileList="dataInfo.fileList2"
						name="1"
						multiple
						:maxCount="30"
						@afterRead="afterRead"
						@delete="deletePic"
						width="118rpx"
						height="118rpx"
					></uv-upload>
				</view>
				<view class="size-34 color-black3 tc mt-40">等待识别…</view>
			</view>
		</view>

		

		<!-- <uv-image src="/static/images/maixingren.png" width="102rpx" height="102rpx" mode="scaleToFill"></uv-image> -->

		<view class="mt-30">
			<view class="width100 height-90"></view>
			<view class="fixedClass plr-24">
				<!-- <view class="list_b_btn  list_b_btn2">马上生成</view> -->
				<view class="list_b_btn" @click="onSubmit">马上生成</view>
				<!-- <view class="list_b_btn">正在生成中…</view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { getWindowHeight } from '@/pages/util/getHeight';
import { onLoad } from '@dcloudio/uni-app';
import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
import useLoginStore from '@/pinia-store/userInfoStore';
const useLogin = useLoginStore();
const windowHeight = getWindowHeight();
// console.log('useLoginuseLogin',useLogin);
/** @name 数据 */
const dataInfo = reactive({
	fileList1: [],
	fileList2: [],
	isShow: 'a'
});
onLoad((options: any) => {});
/** @name xxx */
function onSubmit() {}

// 删除图片
function deletePic(event) {
	dataInfo[`fileList${event.name}`].splice(event.index, 1);
}

// 新增图片
async function afterRead(event) {
	console.log('新增图片event', event);
	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	let fileListLen = dataInfo[`fileList${event.name}`].length;
	lists.map((item) => {
		dataInfo[`fileList${event.name}`].push({
			...item,
			status: 'uploading',
			message: '上传中'
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = dataInfo[`fileList${event.name}`][fileListLen];
		dataInfo[`fileList${event.name}`].splice(
			fileListLen,
			1,
			Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			})
		);
		fileListLen++;
	}
}
function uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			formData: {
				user: 'test'
			},
			success: (res) => {
				setTimeout(() => {
					resolve(res.data);
				}, 1000);
			}
		});
	});
}
</script>

<style scoped lang="scss">
:deep(.uv-upload__button) {
	//  模版
	border-radius: 16rpx;
}

// 按钮
.list_b_btn2 {
	background: #b6b6b6;
}
</style>
